import {CCard} from '@/components/card'
import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import {CFormModal, ChangeVisible} from '@/components/modal'
import {editDevNameApi, editAddressApi, editDevAreaApi} from '@/api/public'
import {getUserId} from '@/libs/auth'
import {number} from 'echarts'
import './index.less'
import cityData from './data/city.json'
import {message} from 'ant-design-vue'

const SettingItem = defineComponent({
  props: {
    label: String,
    desc: String,
    canEdit: Boolean,
    isEdit: Boolean,
    devId: Number || null || undefined,
    selectDevInfoFunc: Function
  },
  emits: ['onClick'],
  setup(props, emits) {
    // 是否是修改状态的标识
    const isEdit = ref(false)
    // 修改设备名称的编辑点击事件
    const editDevNameClick = () => {
      if (editValue.value == '') {
        editValue.value = props.desc
      }
      console.log('编辑')
      isEdit.value = true
    }

    const devId = ref('')

    // 修改设备名称的保存点击事件
    const editDevNameSaveClick = async () => {
      if (editValue.value != props.desc) {
        switch (props.label) {
          case '设备名称':
            await editDevNameApi({
              devId: props.devId,
              devName: editValue.value
            })
            break
          case '详细地址':
            await editAddressApi({
              devId: props.devId,
              address: editValue.value
            })
            break
          default:
            break
        }
      }

      console.log('保存')
      isEdit.value = false
    }

    // 选择省市区的弹窗的确定事件
    const selectCityModalOk = async () => {
      let data = {
        devId: props.devId,
        province: provinceValue.value,
        city: cityValue.value,
        district: districtValue.value
      }
      await editDevAreaApi(data)
        .then(() => {
          message.success('修改设备省市区成功!')
        })
        .catch(() => {
          message.error('修改设备省市区失败!')
        })
      props.selectDevInfoFunc()
      isShowEditCityModal.value = false
      cityShowData.value = provinceValue.value + '-' + cityValue.value + '-' + districtValue.value
      // props.desc = provinceCityDistrictValue.value.join('-')
    }

    // 选择省市区弹窗的选择框change事件
    const selectCityChange = () => {
      provinceValue.value = provinceCityDistrictValue.value[0]
      cityValue.value = provinceCityDistrictValue.value[1]
      districtValue.value = provinceCityDistrictValue.value[2]
    }

    // 修改的值
    const editValue = ref('')
    onMounted(() => {
      // devId.value = props.devId
      // console.log(props.devId)
      // console.log(cityData)
      // editValue.value = props.desc
      cityShowData.value = props.desc
    })

    // 城市级联选择数据
    // 省市区
    const provinceCityDistrictValue = ref('')
    // 省
    const provinceValue = ref('')

    // 市
    const cityValue = ref('')

    // 区
    const districtValue = ref('')

    // 城市显示数据
    const cityShowData = ref('')

    // 是否显示修改城市级联弹窗的标识
    const isShowEditCityModal = ref(false)

    // const editInputChange = (e: any) => {
    //   console.log(e)
    //   props.desc = e
    // }

    const nameValueFunc = () => {
      // let str = ''
      return editValue.value == '' ? props.desc : editValue.value
    }

    return () => (
      <div class='h-64 grid grid-cols-24 px-32 leading-64'>
        <CnMediumSpan class='text-16 mr-42 col-span-3'>{props.label || 'label'}</CnMediumSpan>
        <div class='col-span-20 overflow-hidden'>
          {props.canEdit ? (
            <div>
              {isEdit.value ? (
                <a-input
                  class='w-300'
                  v-model:value={editValue.value}
                  placeholder='请输入设备名称'
                ></a-input>
              ) : (
                <CnNormalSpan class='text-16 cursor-pointer'>{nameValueFunc()}</CnNormalSpan>
              )}
            </div>
          ) : (
            <CnNormalSpan class='text-16 cursor-pointer'>
              <span>{props.desc}</span>
            </CnNormalSpan>
          )}
        </div>

        {/* 设备名称 */}
        {props.canEdit && props.label == '设备名称' ? (
          <div>
            {!isEdit.value ? (
              <CnNormalSpan
                class='text-primary flex items-center cursor-pointer col-span-1'
                onClick={() => {
                  editDevNameClick()
                }}
              >
                编辑
              </CnNormalSpan>
            ) : (
              <CnNormalSpan
                class='text-success flex items-center cursor-pointer col-span-1'
                onClick={() => {
                  editDevNameSaveClick()
                }}
              >
                保存
              </CnNormalSpan>
            )}
          </div>
        ) : (
          //   {
          //     props.isEdit ? (
          //       <div>111</div>
          //    ):
          //  }
          <div></div>
        )}

        {/* 省市区 */}
        {props.canEdit && props.label == '省市区' ? (
          <div class='right_text'>
            <CnNormalSpan
              class='text-primary flex items-center cursor-pointer col-span-1'
              onClick={() => {
                isShowEditCityModal.value = true
              }}
            >
              选择
            </CnNormalSpan>
          </div>
        ) : (
          <div></div>
        )}

        {/* 详细地址 */}
        {props.canEdit && props.label == '详细地址' ? (
          <div class='right_text'>
            {!isEdit.value ? (
              <CnNormalSpan
                class='text-primary flex items-center cursor-pointer col-span-1'
                onClick={() => {
                  editDevNameClick()
                }}
              >
                编辑
              </CnNormalSpan>
            ) : (
              <CnNormalSpan
                class='text-success flex items-center cursor-pointer col-span-1'
                onClick={() => {
                  editDevNameSaveClick()
                }}
              >
                保存
              </CnNormalSpan>
            )}
          </div>
        ) : (
          <div></div>
        )}
        {/* <CFormModal class='w-388 h-300' v-model={[isEdit.value, 'visible']}>
          {<div>1111</div>}
        </CFormModal> */}

        <div class='ssx_modal_box'>
          <a-modal
            v-model={[isShowEditCityModal.value, 'visible']}
            title='选择省市区'
            onOk={() => {
              selectCityModalOk()
            }}
          >
            <div style='padding:60px 0px 200px 40px'>
              <p style='margin-bottom:18px'>
                <CnNormalSpan>
                  <span style='color:#324569'>当前选择城市</span>
                  {provinceCityDistrictValue.value != '' ? (
                    <span style='margin-left:12px'>
                      {provinceValue.value}-{cityValue.value}-{districtValue.value}
                    </span>
                  ) : (
                    <span style='margin-left:12px'>{props.desc}</span>
                  )}
                </CnNormalSpan>
              </p>
              <CnNormalSpan>
                <span style='color:#324569'>请选择省市区</span>
              </CnNormalSpan>
              <a-cascader
                style='margin-left:10px;'
                class='w-200'
                v-model={[provinceCityDistrictValue.value, 'value']}
                options={cityData}
                show-search={true}
                placeholder='请选择省市区'
                fieldNames={{
                  label: 'value',
                  value: 'value'
                }}
                onChange={() => {
                  selectCityChange()
                }}
              />
            </div>
          </a-modal>
        </div>
      </div>
    )
  }
})

export const DevNameItem = defineComponent({
  props: {
    devInfo: Object
  },
  setup(props, {slots}) {
    return () => (
      // title={'设备信息-设备名称'}
      <CCard showTitle={false} class='bg-white py-0 px-16'>
        <SettingItem
          class='border-b border-splitLine'
          label='设备名称'
          devId={Number(props.devInfo.devId)}
          desc={props.devInfo.devName}
          canEdit={true}
        ></SettingItem>
        <SettingItem
          class='border-b border-splitLine'
          label='设备型号'
          desc={props.devInfo.devTypeName}
        ></SettingItem>

        <SettingItem
          class='border-b border-splitLine'
          label='设备编号'
          desc={props.devInfo.devGId}
        ></SettingItem>

        <SettingItem label='设备码' desc={props.devInfo.devYard}></SettingItem>
      </CCard>
    )
  }
})

export const DevRuntimeItem = defineComponent({
  props: {
    devInfo: Object
  },
  setup(props, {slots}) {
    return () => (
      // title={'设备信息-创建时间'}
      <CCard showTitle={false} class='bg-white  py-0 px-16'>
        <SettingItem
          class='border-b border-splitLine'
          label='创建时间'
          desc={props.devInfo.CreateTime}
        ></SettingItem>

        <SettingItem label='运行时间' desc={props.devInfo.runningTime}></SettingItem>
      </CCard>
    )
  }
})

export const DevSystemMsgItem = defineComponent({
  props: {
    devInfo: Object,
    selectDevInfoFunc: Function
  },
  setup(props, {slots}) {
    return () => (
      //  title={'设备信息-系统信息'}
      <CCard showTitle={false} class='bg-white  py-0 px-16'>
        <SettingItem
          class='border-b border-splitLine'
          label='系统信息'
          desc={props.devInfo.systemInfo}
        ></SettingItem>
        <SettingItem
          class='border-b border-splitLine'
          label='省市区'
          devId={Number(props.devInfo.devId)}
          desc={props.devInfo.province + '-' + props.devInfo.city + ' -' + props.devInfo.district}
          canEdit={true}
          selectDevInfoFunc={props.selectDevInfoFunc}
        ></SettingItem>
        <SettingItem
          class='border-b border-splitLine'
          label='详细地址'
          devId={Number(props.devInfo.devId)}
          desc={props.devInfo.devAddress}
          canEdit={true}
        ></SettingItem>

        <SettingItem
          label='经纬度'
          desc={
            '经度：' + props.devInfo.longitude + '\xa0\xa0\xa0纬度：' + props.devInfo.dimensionality
          }
        ></SettingItem>
      </CCard>
    )
  }
})
